使用 component 的事件傳遞

當我們在使用 component 的時候會有組件，那這些組件之間會如何傳遞資料呢？又或者如何使資料可以進入到組建中呢？

來寫一個簡單加法的例子

//新增一個組件為加法的組件
Vue.component('add-method', {
    //傳遞到子組件的時候會用到的 props
    props: ['a', 'b'],
    //點擊按鈕後會直接作加法
    template: '<div><button v-on:click="add">加吧</button></div>',
    methods: {
        add: function(){
            var value = 0;
            value = this.a + this.b;
            //再傳回到父組件的時候會使用到 $emit
            this.$emit('add_event', {
                result:value
            });
        }
    },
});

新建一個 Vue

var myApp = new Vue({
    el: '#myApp', 
    data: {
        result: 0
    },
    methods: {
        //這裡會透過標籤中的值來傳遞加完的數字
        getAddResult: function(pval){
            this.result = pval.result;
        }
    },
});

在 id = "myApp" 裡面加上標籤

//使用組件中的新建的標籤
//在 v-on 中使用了 add_event 這裡是針對 $emit 所命名的名稱會將裡面的值傳送到 getAddResult 的參數裡面也就是 pval 這樣就可以取得組件上面的值了
//那這邊大家有看到 a 跟 b 這兩個，是使用組件中的 props 屬性，主要是可以子組件所使用的，透過這個我們的子組件就可以得到這兩個值摟
<add-method :a="6" :b="12" v-on:add_event="getAddResult"></add-method>
<hr/>
<h3>{{result}}</h3>

大家有沒有看懂了呢！